CSS:n vierityspohjaisten animaatioiden hallinta: Syväsukellus aikajanojen synkronointiin

Vuosien ajan mukaansatempaavien, vieritykseen sidottujen animaatioiden luominen verkossa on ollut JavaScriptin alaa. Kehittäjät ovat turvautuneet kirjastoihin ja monimutkaisiin `requestAnimationFrame`-silmukoihin, jotka kuuntelevat jatkuvasti vieritystapahtumia. Vaikka tämä lähestymistapa on tehokas, se aiheuttaa usein suorituskykykustannuksia, mikä johtaa nykimiseen ja vähemmän sulavaan kokemukseen, erityisesti heikompitehoisilla laitteilla. Tänään on käynnissä paradigman muutos, joka siirtää koko tämän käyttöliittymäsuunnittelun kategorian suoraan selaimen korkean suorituskyvyn renderöintimoottoriin, kiitos CSS:n vierityspohjaisten animaatioiden.

Tämä tehokas uusi määrittely antaa meille mahdollisuuden yhdistää animaation edistyminen suoraan säiliön vieritysasemaan tai elementin näkyvyyteen. Tuloksena on täydellisen sulavia, GPU-kiihdytettyjä animaatioita, jotka ovat deklaratiivisia, saavutettavia ja huomattavan tehokkaita. Todellinen luova potentiaali avautuu kuitenkin, kun siirrymme yksittäisten elementtien animoinnista useiden, monimutkaisten vuorovaikutusten harmoniseen orkestrointiin. Tämä on animaatioiden synkronoinnin taitoa.

Tässä kattavassa oppaassa tutkimme CSS:n vierityspohjaisten animaatioiden aikajanojen peruskäsitteitä ja syvennymme niiden synkronointiin vaadittaviin tekniikoihin. Opit luomaan kerroksellisia parallaksiefektejä, peräkkäisiä tarinankerronnallisia paljastuksia ja monimutkaisia komponenttien vuorovaikutuksia – kaikki puhtaalla CSS:llä. Käsittelemme:

• Perusero scroll()- ja view()-aikajanojen välillä.
• Mullistava nimettyjen aikajanojen konsepti useiden elementtien synkronointiin.
• Animaation toiston hienosäätö animation-range-ominaisuudella.
• Käytännöllisiä, todellisia esimerkkejä koodilla, jota voit käyttää heti.
• Parhaat käytännöt suorituskyvyn, saavutettavuuden ja selainyhteensopivuuden osalta.

Valmistaudu ajattelemaan uudelleen, mikä CSS:llä on mahdollista, ja nosta verkkokokemuksesi uudelle interaktiivisuuden ja viimeistelyn tasolle.

Perusta: Animaatioiden aikajanojen ymmärtäminen

Ennen kuin voimme synkronoida animaatioita, meidän on ensin ymmärrettävä mekanismi, joka niitä ohjaa. Perinteisesti CSS-animaation aikajana perustuu ajan kulumiseen, kuten sen `animation-duration` määrittelee. Vierityspohjaisilla animaatioilla katkaisemme tämän yhteyden aikaan ja yhdistämme sen sijaan animaation edistymisen uuteen lähteeseen: edistymisaikajanaan (progress timeline).

Tämä saavutetaan pääasiassa `animation-timeline`-ominaisuuden avulla. Sen sijaan, että animaatio käynnistyisi itsestään, tämä ominaisuus käskee selainta selaamaan animaation avainkuvia (keyframes) määritetyn aikajanan edistymisen perusteella. Kun aikajana on 0 %:ssa, animaatio on 0 %:n avainkuvassaan. Kun aikajana on 50 %:ssa, animaatio on 50 %:n avainkuvassaan, ja niin edelleen.

CSS-määrittely tarjoaa kaksi pääfunktiota näiden edistymisaikajanojen luomiseen:

1. `scroll()`: Luo nimettömän aikajanan, joka seuraa vierityssäiliön (scroller) vierityksen edistymistä.
2. `view()`: Luo nimettömän aikajanan, joka seuraa tietyn elementin näkyvyyttä sen liikkuessa näkymäalueen (viewport) tai minkä tahansa vierityssäiliön läpi.

Tarkastellaan kutakin näistä yksityiskohtaisesti vankan perustan luomiseksi.

Syväsukellus: scroll()-edistymisaikajana

Mitä scroll() on?

scroll()-funktio on ihanteellinen animaatioille, joiden tulisi vastata sivun tai tietyn vieritettävän elementin yleistä vierityksen edistymistä. Klassinen esimerkki on artikkelin yläreunassa oleva lukemisen edistymispalkki, joka täyttyy käyttäjän vierittäessä sivua alaspäin.

Se mittaa, kuinka pitkälle käyttäjä on vierittänyt vierityssäiliötä. Oletusarvoisesti se seuraa koko dokumentin vieritysasemaa, mutta se voidaan määrittää seuraamaan mitä tahansa sivun vieritettävää säiliötä.

Syntaksi ja parametrit

scroll()-funktion perussyntaksi on seuraava:

animation-timeline: scroll(<scroller> <axis>);

Käydään läpi sen parametrit:

• `<scroller>` (valinnainen): Tämä määrittelee, minkä vierityssäiliön edistymistä seurataan.
  • root: Oletusarvo. Se edustaa dokumentin näkymäalueen vierityselementtiä (pääsivun vierityspalkki).
  • self: Seuraa elementin omaa vieritysasemaa, olettaen että se on vierityssäiliö (esim. sillä on `overflow: scroll`).
  • nearest: Seuraa lähimmän ylemmän tason vierityssäiliön vieritysasemaa.
• `<axis>` (valinnainen): Tämä määrittelee seurattavan vieritys-akselin.
  • block: Oletusarvo. Seuraa edistymistä block-akselilla (pystysuora vaakasuuntaisissa kirjoitustiloissa kuten englannin kielessä).
  • inline: Seuraa edistymistä inline-akselilla (vaakasuora englannin kielessä).
  • y: Selkeä alias pystyakselille.
  • x: Selkeä alias vaaka-akselille.

Käytännön esimerkki: Sivun vierityksen edistymispalkki

Rakennetaan klassinen lukemisen edistymisen ilmaisin. Se on täydellinen demonstraatio scroll()-funktiosta sen yksinkertaisimmassa muodossa.

HTML-rakenne:

            <div class="progress-bar"></div>
<article>
  <h1>Pitkä artikkelin otsikko</h1>
  <p>... paljon sisältöä täällä ...</p>
  <p>... lisää sisältöä, jotta sivu on vieritettävä ...</p>
</article>
            

              
                Copy
              
            
          

CSS-toteutus:

            /* Määritä avainkuvat edistymispalkille */
@keyframes grow-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Tyylittele edistymispalkki */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background-color: dodgerblue;
  transform-origin: left; /* Animoi skaalaus vasemmalta puolelta */

  /* Yhdistä animaatio vierityksen aikajanaan */
  animation: grow-progress linear;
  animation-timeline: scroll(root block);
}

/* Bodyn perustyylit esittelyä varten */
body {
  font-family: sans-serif;
  line-height: 1.6;
  padding: 2rem;
  height: 300vh; /* Varmista, että vieritettävää on runsaasti */
}
            

              
                Copy
              
            
          

Selitys:

1. Määrittelemme yksinkertaisen `grow-progress`-animaation, joka skaalaa elementin vaakasuunnassa nollasta yhteen.
2. `.progress-bar` on kiinnitetty näkymäalueen yläreunaan.
3. Taikuus tapahtuu kahdessa viimeisessä ominaisuudessa. Sovellamme `grow-progress`-animaatiota. Ratkaisevaa on, että sen sijaan että antaisimme sille keston (kuten `1s`), asetamme sen `animation-timeline`-arvoksi `scroll(root block)`.
4. Tämä kertoo selaimelle: "Älä toista tätä animaatiota ajan mukaan. Sen sijaan, selaa sen avainkuvia, kun käyttäjä vierittää juuridokumenttia pystysuunnassa (`block`-akseli)."

Kun käyttäjä on aivan sivun yläreunassa (0 % vierityksen edistymisestä), palkin `scaleX` on 0. Kun hän on aivan alareunassa (100 % vierityksen edistymisestä), sen `scaleX` on 1. Tuloksena on täydellisen sulava edistymisen ilmaisin ilman JavaScriptiä.

Läheisyyden voima: view()-edistymisaikajana

Mitä view() on?

Vaikka `scroll()` liittyy säiliön yleiseen edistymiseen, `view()` liittyy yhden elementin matkaan vieritysalueen näkyvällä alueella. Se on natiivi CSS-ratkaisu uskomattoman yleiseen "animoi paljastuessa" -malliin, jossa elementit ilmestyvät, liukuvat ylös tai animoituvat muuten, kun ne tulevat näyttöön.

`view()`-aikajana alkaa, kun elementti tulee ensimmäisen kerran näkyviin vieritysalueella, ja päättyy, kun se on kokonaan poistunut näkyvistä. Tämä antaa meille aikajanan 0 %:sta 100 %:iin, joka on suoraan sidottu elementin näkyvyyteen, mikä tekee siitä uskomattoman intuitiivisen paljastusefekteille.

Syntaksi ja parametrit

view():n syntaksi on hieman erilainen:

animation-timeline: view(<axis> <view-timeline-inset>);

• `<axis>` (valinnainen): Sama kuin `scroll()`:ssa (`block`, `inline`, `y`, `x`). Se määrittää, minkä vieritysalueen akselin suhteen elementin näkyvyyttä seurataan.
• `<view-timeline-inset>` (valinnainen): Tämä on tehokas parametri, jonka avulla voit säätää "aktiivisen" näkymäalueen rajoja. Se voi hyväksyä yhden tai kaksi arvoa (alku- ja loppureunuksille). Voit käyttää prosentteja tai kiinteitä pituuksia. Esimerkiksi `100px 20%` tarkoittaa, että aikajana katsoo näkymäalueen alkavan 100 pikselin päässä ylhäältä ja päättyvän 20 %:n päässä alhaalta. Tämä mahdollistaa hienosäädön sille, milloin animaatio alkaa ja päättyy suhteessa elementin sijaintiin näytöllä.

Käytännön esimerkki: Sisään häivytys paljastuessa

Luodaan klassinen efekti, jossa sisältökortit häipyvät ja liukuvat näkyviin, kun ne vieritetään näytölle.

HTML-rakenne:

            <section class="content-grid">
  <div class="card">Kortti 1</div>
  <div class="card">Kortti 2</div>
  <div class="card">Kortti 3</div>
  <div class="card">Kortti 4</div>
</section>
            

              
                Copy
              
            
          

CSS-toteutus:

            /* Määritä avainkuvat paljastusanimaatiolle */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card {
  /* Sovella animaatio jokaiseen korttiin */
  animation: fade-in-up linear;
  animation-timeline: view(); /* Tässä se on! */

  /* Muut tyylit */
  background-color: #f0f0f0;
  padding: 2rem;
  border-radius: 8px;
  min-height: 200px;
  display: grid;
  place-content: center;
  font-size: 2rem;
}

/* Asettelutyylit */
.content-grid {
  display: grid;
  gap: 2rem;
  padding: 10vh 2rem;
}
            

              
                Copy
              
            
          

Selitys:

1. `fade-in-up`-avainkuvat määrittelevät haluamamme animaation: alkaa läpinäkyvänä ja hieman alempana, päättyy läpinäkymättömänä ja lopullisessa asemassaan.
2. Jokainen `.card`-elementti saa tämän animaation.
3. Ratkaiseva rivi on `animation-timeline: view();`. Tämä luo ainutlaatuisen, nimettömän aikajanan jokaiselle kortille.
4. Jokaisen yksittäisen kortin animaatio on 0 %:ssa, kun se juuri alkaa tulla näkymäalueelle, ja saavuttaa 100 %, kun se on juuri poistunut näkymäalueelta.

Kun vierität sivua alaspäin, jokainen kortti animoituu sulavasti paikoilleen juuri tullessaan näkyviin. Tämä saavutetaan vain kahdella CSS-rivillä, mikä aiemmin vaati JavaScriptin Intersection Observerin ja huolellista tilanhallintaa.

Ydinaihe: Animaatioiden synkronointi

Nimettömien `scroll()`- ja `view()`-aikajanojen käyttö on tehokasta eristetyille efekteille. Mutta entä jos haluamme useiden elementtien reagoivan samaan aikajanaan? Kuvittele parallaksiefekti, jossa taustakuva, otsikko ja etualan elementti liikkuvat eri nopeuksilla, mutta kaikki ovat saman vieritystoiminnon ohjaamia. Tai tuotekuva, joka muuttuu, kun vierität sen ominaisuusluettelon ohi.

Tässä kohtaa synkronointi astuu kuvaan, ja avain on siirtyä nimettömistä aikajanoista nimettyihin aikajanoihin.

Miksi synkronoida?

Synkronointi mahdollistaa rikkaiden, tarinavetoisten kokemusten luomisen. Riippumattomien animaatioiden kokoelman sijaan voit rakentaa yhtenäisen kohtauksen, joka kehittyy käyttäjän vierittäessä. Tämä on olennaista:

• Monimutkaisille parallaksiefekteille: Syvyysvaikutelman luominen liikuttamalla eri kerroksia vaihtelevilla nopeuksilla suhteessa yhteen vierityksen laukaisimeen.
• Koordinoiduille komponenttitiloille: Monimutkaisen käyttöliittymäkomponentin eri osien animointi yhtäaikaisesti sen vieriessä näkyviin.
• Visuaaliselle tarinankerronnalle: Elementtien paljastaminen ja muuttaminen huolellisesti koreografioidussa järjestyksessä käyttäjän ohjaamiseksi tarinan läpi.

Tekniikka: Jaetut nimetyt aikajanat

Synkronointimekanismiin liittyy kolme uutta CSS-ominaisuutta:

1. `timeline-scope`: Sovelletaan säiliöelementtiin. Se luo laajuuden, jossa sen sisällä määritellyt nimetyt aikajanat ovat muiden elementtien löydettävissä.
2. `scroll-timeline-name` / `view-timeline-name`: Sovelletaan elementtiin aikajanan luomiseksi ja nimeämiseksi. Nimen on oltava viivalla alkava tunniste (esim. `--my-timeline`). Tämän elementin vierityksen edistymisestä (`scroll-timeline-name`) tai näkyvyydestä (`view-timeline-name`) tulee nimetyn aikajanan lähde.
3. `animation-timeline`: Olemme nähneet tämän aiemmin, mutta nyt sen sijaan, että käyttäisimme `scroll()` tai `view()`, annamme sille jaetun aikajanamme viivalla alkavan tunnisteen nimen (esim. `animation-timeline: --my-timeline;`).

Prosessi on seuraava: 1. Ylemmän tason elementti määrittelee `timeline-scope`:n. 2. Alemman tason elementti määrittelee ja nimeää aikajanan käyttämällä `view-timeline-name`- tai `scroll-timeline-name`-ominaisuutta. 3. Mikä tahansa muu alemman tason elementti voi sitten käyttää tätä nimeä `animation-timeline`-ominaisuudessaan liittyäkseen samaan aikajanaan.

Käytännön esimerkki: Monikerroksinen parallaksikohtaus

Rakennetaan klassinen parallaksi-ylätunniste, jossa taustakuva vierii hitaammin kuin sivu ja otsikko häipyy nopeammin.

HTML-rakenne:

            <div class="parallax-container">
  <div class="parallax-background"></div>
  <h1 class="parallax-title">Synkronoitu liike</h1>
</div>
<div class="content">
  <p>... sivun pääsisältö ...</p>
</div>
            

              
                Copy
              
            
          

CSS-toteutus:

            /* 1. Määritä laajuus nimetylle aikajanallemme */
.parallax-container {
  timeline-scope: --parallax-scene;
  position: relative;
  height: 100vh;
  display: grid;
  place-items: center;
}

/* 2. Määritä aikajana itse käyttämällä säiliön näkyvyyttä */
/* Säiliön matka näkymäalueen läpi ohjaa animaatioita */
.parallax-container {
  view-timeline-name: --parallax-scene;
}

/* 3. Määritä avainkuvat jokaiselle kerrokselle */
@keyframes move-background {
  to {
    transform: translateY(30vh); /* Liikkuu hitaammin */
  }
}

@keyframes fade-title {
  to {
    opacity: 0;
    transform: scale(0.8);
  }
}

/* 4. Tyylittele kerrokset ja yhdistä ne nimettyyn aikajanaan */
.parallax-background {
  position: absolute;
  inset: -30vh 0 0 0; /* Lisäkorkeutta liikkumavaraa varten */
  background: url('https://picsum.photos/1600/1200') no-repeat center center/cover;
  z-index: -1;

  /* Liitä jaettuun aikajanaan */
  animation: move-background linear;
  animation-timeline: --parallax-scene;
}

.parallax-title {
  color: white;
  font-size: 5rem;
  text-shadow: 0 0 10px rgba(0,0,0,0.7);

  /* Liitä samaan jaettuun aikajanaan */
  animation: fade-title linear;
  animation-timeline: --parallax-scene;
}

            

              
                Copy
              
            
          

Selitys:

1. `.parallax-container` luo `timeline-scope`:n nimeltä `--parallax-scene`. Tämä tekee nimestä sen lapsielementtien saatavilla olevan.
2. Sitten lisäämme `view-timeline-name: --parallax-scene;` samaan elementtiin. Tämä tarkoittaa, että `--parallax-scene`-niminen aikajana on `view()`-aikajana, joka perustuu `.parallax-container`-elementin omaan näkyvyyteen.
3. Luomme kaksi erilaista animaatiota: `move-background` hienovaraista pystysuuntaista siirtymää varten ja `fade-title` häivytys- ja skaalaustehostetta varten.
4. Ratkaisevaa on, että sekä `.parallax-background`- että `.parallax-title`-elementtien `animation-timeline`-ominaisuudeksi on asetettu `--parallax-scene`.

Nyt kun `.parallax-container` vierii näkymäalueen läpi, se tuottaa yhden edistymisarvon. Sekä tausta että otsikko käyttävät tätä samaa arvoa ohjatakseen omia animaatioitaan. Vaikka niiden avainkuvat ovat täysin erilaisia, niiden toisto on täydellisesti synkronoitu, mikä luo yhtenäisen ja vaikuttavan visuaalisen tehosteen.

Edistynyt synkronointi animation-range-ominaisuudella

Nimetyt aikajanat ovat fantastisia animaatioiden toistamiseen yhtäaikaisesti. Mutta entä jos haluat niiden toistuvan peräkkäin tai että yksi animaatio laukeaa vain toisen elementin näkyvyyden tietyn osan aikana? Tässä kohtaa `animation-range`-ominaisuusperhe tarjoaa toisen tehokkaan kontrollikerroksen.

Enemmän kuin 0 % – 100 %

Oletusarvoisesti animaatio on yhdistetty sen aikajanan koko kestoon. `animation-range` antaa sinun määritellä aikajanan tietyt alku- ja loppupisteet, joiden tulisi vastata animaatiosi avainkuvien 0 % ja 100 % pisteitä.

Tämä antaa sinun sanoa asioita kuten: "Aloita tämä animaatio, kun elementti tulee 20 % näytöstä, ja lopeta se, kun se saavuttaa 50 % merkin."

animation-range-arvojen ymmärtäminen

Syntaksi on `animation-range-start` ja `animation-range-end`, tai lyhennettynä `animation-range`.

animation-range: <start-range> <end-range>;

Arvot voivat olla yhdistelmä erityisiä avainsanoja ja prosentteja. `view()`-aikajanalle yleisimmät avainsanat ovat:

• entry: Hetki, jolloin elementin reunalaatikko ylittää vieritysalueen loppureunan.
• exit: Hetki, jolloin elementin reunalaatikko ylittää vieritysalueen alkureunan.
• cover: Kattaa koko ajanjakson, jolloin elementti peittää vieritysalueen, hetkestä jolloin se peittää sen kokonaan hetkeen, jolloin se lakkaa peittämästä.
• contain: Kattaa ajanjakson, jolloin elementti on kokonaan vieritysalueen sisällä.

Voit myös lisätä näihin prosenttisiirtymiä, kuten `entry 0%` (oletusalku), `entry 100%` (kun elementin alareuna kohtaa näkymäalueen alareunan), `exit 0%` ja `exit 100%`.

Käytännön esimerkki: Peräkkäinen tarinankerronnallinen kohtaus

Luodaan ominaisuusluettelo, jossa jokainen kohta korostuu, kun vierität sen ohi, käyttäen yhtä jaettua aikajanaa täydelliseen koordinointiin.

HTML-rakenne:

            <div class="feature-list-container">
  <div class="feature-list-timeline-marker"></div>
  <div class="feature-item">
    <h3>Ominaisuus yksi: Globaali kattavuus</h3>
    <p>Palvelumme ovat saatavilla maailmanlaajuisesti.</p>
  </div>
  <div class="feature-item">
    <h3>Ominaisuus kaksi: Lyömätön nopeus</h3>
    <p>Koe seuraavan sukupolven suorituskyky.</p>
  </div>
  <div class="feature-item">
    <h3>Ominaisuus kolme: Rautainen turvallisuus</h3>
    <p>Tietosi ovat aina suojattuja.</p>
  </div>
</div>
            

              
                Copy
              
            
          

CSS-toteutus:

            /* Määritä laajuus pääsäiliöön */
.feature-list-container {
  timeline-scope: --feature-list;
  position: relative;
  padding: 50vh 0; /* Anna tilaa vierittämiselle */
}

/* Käytä erillistä tyhjää div-elementtiä aikajanan lähteen määrittämiseen */
.feature-list-timeline-marker {
  view-timeline-name: --feature-list;
  position: absolute;
  inset: 0;
}

/* Avainkuvat kohdan korostamiseen */
@keyframes highlight-feature {
  to { 
    background-color: lightgoldenrodyellow;
    transform: scale(1.02);
  }
}

.feature-item {
  width: 80%;
  margin: 5rem auto;
  padding: 2rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  transition: background-color 0.3s, transform 0.3s;

  /* Liitä animaatio ja jaettu aikajana */
  animation: highlight-feature linear both;
  animation-timeline: --feature-list;
}

/* animation-range-taikuus peräkkäisyyteen */
.feature-item:nth-of-type(1) {
  animation-range: entry 5% entry 40%;
}

.feature-item:nth-of-type(2) {
  animation-range: entry 35% entry 70%;
}

.feature-item:nth-of-type(3) {
  animation-range: entry 65% entry 100%;
}

            

              
                Copy
              
            
          

Selitys:

1. Määrittelemme `--feature-list`-laajuuden ja luomme nimetyn `view()`-aikajanan, joka on sidottu tyhjään merkkidiviin, joka kattaa koko säiliön. Tämä yksi aikajana seuraa koko ominaisuusosion näkyvyyttä.
2. Jokainen `.feature-item` on linkitetty tähän samaan `--feature-list`-aikajanaan ja sille on annettu sama `highlight-feature`-animaatio.
3. Ratkaiseva osa on `animation-range`. Ilman sitä kaikki kolme kohtaa korostuisivat samanaikaisesti säiliön vieriessä näkyviin.
4. Sen sijaan määrittelemme eri alueet:
   • Ensimmäinen kohta animoituu aikajanan edistymisen 5 % ja 40 % välillä.
   • Toinen kohta animoituu 35 % – 70 % ikkunan aikana.
   • Kolmas animoituu 65 %:sta 100 %:iin.

Tämä luo miellyttävän peräkkäisen tehosteen. Kun vierität, ensimmäinen ominaisuus korostuu. Jatkaessasi vierittämistä se häipyy takaisin samalla kun toinen korostuu, ja niin edelleen. Päällekkäiset alueet (`entry 40%` ja `entry 35%`) luovat sujuvan vaihdon. Tämä edistynyt peräkkäisyys ja synkronointi saavutetaan vain muutamalla deklaratiivisella CSS-rivillä.

Suorituskyky ja parhaat käytännöt

Vaikka CSS:n vierityspohjaiset animaatiot ovat uskomattoman tehokkaita, on tärkeää käyttää niitä vastuullisesti. Tässä on joitakin keskeisiä parhaita käytäntöjä maailmanlaajuiselle yleisölle.

Suorituskykyetu

Tämän teknologian ensisijainen etu on suorituskyky. Toisin kuin JavaScript-pohjaiset vierityskuuntelijat, jotka ajetaan pääsäikeessä ja voivat olla muiden tehtävien estämiä, CSS:n vierityspohjaiset animaatiot ajetaan sommittelijasäikeessä (compositor thread). Tämä tarkoittaa, että ne pysyvät silkkisen sileinä, vaikka pääsäie olisi kiireinen. Tämän edun maksimoimiseksi pysy animoimassa ominaisuuksia, joiden sommittelu on halpaa, pääasiassa `transform` ja `opacity`.

Saavutettavuusnäkökohdat

Kaikki eivät halua tai voi sietää liikettä verkkosivuilla. On ratkaisevan tärkeää kunnioittaa käyttäjien mieltymyksiä. Käytä `prefers-reduced-motion`-mediakyselyä poistaaksesi tai vähentääksesi animaatioitasi käyttäjille, jotka ovat ottaneet tämän asetuksen käyttöön käyttöjärjestelmässään.

            @media (prefers-reduced-motion: reduce) {
  .card,
  .parallax-background,
  .parallax-title,
  .feature-item {
    /* Poista animaatiot käytöstä */
    animation: none;
    /* Varmista, että elementit ovat lopullisessa, näkyvässä tilassaan */
    opacity: 1;
    transform: none;
  }
}

            

              
                Copy
              
            
          

Selaintuki ja vararatkaisut

Vuoden 2023 lopulla CSS:n vierityspohjaiset animaatiot ovat tuettuja Chromium-pohjaisissa selaimissa (Chrome, Edge) ja ovat aktiivisen kehityksen alla Firefoxissa ja Safarissa. Maailmanlaajuiselle yleisölle sinun on otettava huomioon selaimet, jotka eivät vielä tue tätä ominaisuutta. Käytä `@supports`-sääntöä soveltaaksesi animaatioita vain siellä, missä ne ovat tuettuja.

            /* Oletustila ei-tukeville selaimille */
.card {
  opacity: 1;
  transform: translateY(0);
}

/* Sovella animaatioita vain tukevissa selaimissa */
@supports (animation-timeline: view()) {
  .card {
    opacity: 0; /* Alkutila animaatiolle */
    transform: translateY(50px);
    animation: fade-in-up linear;
    animation-timeline: view();
  }
}

            

              
                Copy
              
            
          

Tämä progressiivisen parantamisen lähestymistapa varmistaa toimivan kokemuksen kaikille käyttäjille, ja parannetun, animoidun kokemuksen niille, jotka käyttävät moderneja selaimia.

Vianetsintävinkit

Modernit selainten kehittäjätyökalut lisäävät tukea vierityspohjaisten animaatioiden vianetsintään. Esimerkiksi Chrome DevToolsissa voit tarkastaa elementin ja löytää uuden osion "Animations"-paneelista, jonka avulla voit nähdä aikajanan edistymisen ja selata sitä manuaalisesti, mikä helpottaa huomattavasti `animation-range`-arvojen hienosäätöä.

Johtopäätös: Tulevaisuus on vierityspohjainen

CSS:n vierityspohjaiset animaatiot, ja erityisesti kyky synkronoida niitä nimetyillä aikajanoilla, edustavat valtavaa harppausta eteenpäin verkkosuunnittelussa ja -kehityksessä. Olemme siirtyneet imperatiivisista, usein hauraista JavaScript-ratkaisuista deklaratiiviseen, suorituskykyiseen ja saavutettavaan CSS-natiiviin lähestymistapaan.

Olemme tutkineet `scroll()`- ja `view()`-aikajanojen peruskäsitteitä, jotka käsittelevät sivun ja elementin tason edistymistä. Vielä tärkeämpää on, että olemme avanneet synkronoinnin voiman luomalla jaettuja, nimettyjä aikajanoja `timeline-scope`- ja `view-timeline-name`-ominaisuuksilla. Tämä antaa meille mahdollisuuden rakentaa monimutkaisia, koordinoituja visuaalisia tarinoita, kuten parallaksikohtauksia. Lopuksi, `animation-range`-ominaisuudella olemme saaneet yksityiskohtaista hallintaa animaatioiden järjestämiseen ja monimutkaisten, päällekkäisten vuorovaikutusten luomiseen.

Hallitsemalla näitä tekniikoita et enää rakenna vain verkkosivuja; luot dynaamisia, mukaansatempaavia ja suorituskykyisiä digitaalisia tarinoita. Kun selaintuki jatkaa laajentumistaan, näistä työkaluista tulee olennainen osa jokaisen front-end-kehittäjän työkalupakkia. Verkkovaikutteisuuden tulevaisuus on täällä, ja sitä ohjaa vierityspalkki.